<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情人-蔡徐坤</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .right {
            float: left;
            width: 50vw;
        }

        .left {
            float: right;
            width: 50vw;
        }

        .title {
            color: hotpink;
            font-size: 4vw;
        }

        .info {
            font-size: 3vw;
            color: gray;
        }

        pre {
            margin-top: 5.3333vw;
            margin-right: 15vw;
            text-align: center;
            font-size: 1.33vw;
            color: black;
        }

        audio {
            display: none;
        }

        .image {
            display: block;
            margin: 5.3333vw auto;
            width: 30vw;
            height: 30vw;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 2vw rgba(0, 0, 0, .9);
            transition: all .5s;
        }

        .image:hover {
            transform: scale(1.1)
        }

        .right .title,
        .right .info {
            display: block;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="right">
        <img class="image" src="./images/lover.png" alt="">
        <span class="title">情人-蔡徐坤</span>
        <span class="info">点击图片播放/暂停</span>
        <audio class="music" src="./audio/蔡徐坤情人lover舞台+直拍剪辑 - 001 - 蔡徐坤lover舞台直拍混剪.mp3"></audio>
    </div>

    <div class="left">
        <pre>
            眼色 是幻觉
            泳池边你的身影勾成线
            温热 蔓延
            多少个午夜
            肆无忌惮
            醉梦酣欢
            无意追逐
            无法止步
            热度 包围了我
            All I wanna do is fool around
            我的心在小鹿乱撞
            从日落到清晨的月光
            抱你到天亮
            你轻轻一个吻
            我疯狂体会
            气氛开始升温
            危险又迷人
            I really wanna dance tonight
            Feel a little bit dangerous
            少了些安全感
            做我的情人
            I know you want it
            掉落 人间 你像丘比特赐予我的首选
            靠在 枕边
            Ah 光绕过你天使般的脸
            Ah 这感觉实在太危险
            能否再对我温柔一点点
            不忍心再带你去冒险
            All I wanna do is fool around
            我的心在小鹿乱撞
            从日落到清晨的月光
            抱你到天亮
            你轻轻一个吻
            我疯狂体会
            气氛开始升温
            危险又迷人
            I really wanna dance tonight
            Feel a little bit dangerous
            少了些安全感
            做我的情人
            I know you want it
            怪这感觉 狂热
            灯光 晃了
            音乐 放着
            感受体温 上升
            妆 花了
            你 晃着
            I know u really wanna
            You know u really wanna
            你轻轻一个吻
            我疯狂体会
            气氛开始升温
            危险又迷人
            I know you wanna dance tonight
            Feel a little bit dangerous
            少了些安全感
            做我的情人
            I know you want it
            Be my lover
        </pre>
    </div>

    <script>
        var rotateval = 0// 旋转角度
        var Interval //定时器
        window.onload = () => {
            const image = document.querySelector(".image");
            const music = document.querySelector(".music");
            const left = document.querySelector(".left");
            //尝试加载页面就播放音乐
            music.play()
            let isPlay = !music.paused//获取当前音乐播放状态
            console.log(isPlay ? "正在播放" : "未播放");
            if (isPlay) {
                //正在播放
                rotate()
            }
            // console.log(image);
            image.addEventListener("click", function () {
                if (!isPlay) {
                    //播放
                    music.play();
                    //旋转
                    rotate()
                    isPlay = true

                    console.log(isPlay ? "正在播放" : "未播放");
                } else {
                    //暂停
                    music.pause();
                    //清除定时器
                    clearInterval(Interval)
                    isPlay = false

                    console.log(isPlay ? "正在播放" : "未播放");
                }
            })
            //定时器
            function rotate() {
                Interval = setInterval(function () {
                    rotateval += 1;
                    image.style.transform = 'rotate(' + rotateval + 'deg)'
                    image.style.transition = 'all 0.1s linear'
                }, 100)
            }
        }
    </script>
</body>

</html>